<template>
  <div id="kong">
    <div class="headline">
      <img :src="require('@/assets/img/fanhui.webp')" alt="" class="fanhui" @click="fanhui" />
      个人信息
    </div>
    <div class="profile">
      <div class="photo">
        <div class="xj">
          <img :src="require('@/assets/img/xj.webp')" alt="" />
        </div>
        <img :src="require('@/assets/img/minetx.webp')" alt="" />
      </div>
    </div>
    <div class="form">
      <div>
        <van-cell-group border="false">
          <van-field v-model="value" label="英文名" placeholder="Baker" />
          <van-field v-model="name" label="中文名" placeholder="爱课宝贝" />
          <van-field v-model="birthday" type="digit" label="生日" placeholder="2010-01-01" />
          <van-field v-model="gender" label="性别" placeholder="{{gender}}" />
        </van-cell-group>
      </div>
    </div>
    <div class="save" @click="click">保存</div>
  </div>
</template>

<script>
// import { getpersonal } from "../utils/api";

export default {
  data() {
    return {
      Enter: [],
      Profile: [],
      value: "Baker",
      name: "爱课宝贝",
      birthday: "2010-01",
      gender: "男"
    };
  },
  mounted() {
    // this.getenter();
    this.getdenglu();
  },
  computed: {},
  methods: {
    getdenglu() {
      fetch("http://118.31.35.160:4000/user/register", {
        method: "post",
        body: JSON.stringify({
          phone: localStorage.getItem("user")
        }),
        headers: new Headers({
          "Content-Type": "application/json"
        })
      })
        .then(response => {
          return response.json();
        })
        .then(res => {
          console.log(res.results.birthday);
        });
    },
    getProfile() {
      // getpersonal({
      //   phone: localStorage.getItem("user"),
      //   enname: this.value,
      //   name: this.name,
      //   sex: this.gender,
      //   birthday: this.birthday
      // }).then(res => {
      //   console.log(res);
      // });
      fetch("http://118.31.35.160:4000/user/modify", {
        method: "post",
        body: JSON.stringify({
          phone: localStorage.getItem("user"),
          enname: this.value,
          name: this.name,
          sex: this.gender ? 1 : 0,
          birthday: this.birthday
        }),
        headers: new Headers({
          "Content-Type": "application/json",
          Authorization: `Bearer ${localStorage.getItem("token")}`
        })
      })
        .then(response => {
          return response.json();
        })
        .then(res => {
          console.log(res);
        });
      // this.Profile = res.result;
      // console.log(res);
    },
    fanhui() {
      this.$router.back(-1);
    },
    click() {
      this.getProfile();
    }
  }
};
</script>
<style lang="scss" scoped>
#kong {
  width: 375px;
  height: 667px;
  background: #f5f5f5;
}
.headline {
  width: 100%;
  height: 35px;
  font-size: 22px;
  background-color: #f5f5f5;
  font-weight: 600;
  .fanhui {
    width: 12px;
    height: 15px;
    position: absolute;
    top: 7px;
    left: 15px;
    right: 0;
    bottom: 0;
  }
}
.profile {
  width: 100%;
  height: 140px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.photo {
  width: 80px;
  height: 80px;
  background-color: #f5f5f5;
  img {
    width: 100%;
    height: 100%;
  }
}
.xj {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 80px;
  left: 200px;
  right: 0;
  bottom: 0;
}
.form {
  width: 345px;
  height: 200px;
  background-color: #ffffff;
  position: absolute;
  top: -85px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 0.3333em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-decoration: none;
}
.save {
  width: 320px;
  height: 45px;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0f95eb;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -255px;
  margin: auto;
  border-radius: 1.3333em;
}
</style>
